<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="support" content="不支持IE9以下">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/index.css" media="all">
    <script src="/js/layui.js" charset="utf-8"></script>
    <title>登录页面</title>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-md-offset4">
            <div class="layui-card">
                <div class="layui-card-header text-center font-big1">后台管理系统登录</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" lay-verify="required" placeholder="请输入"
                                   v-model="username"  autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">*必填</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密 码</label>
                        <div class="layui-input-inline">
                            <input type="password"  placeholder="请输入密码" autocomplete="off" v-model="password"
                                   class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">*必填</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password" lay-verify="pass" placeholder="请输入验证码"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <img class="image-parent" src="/image/ch.png"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-filter="demo1" v-on:click="login">登 录</button>
                            <button class="layui-btn layui-btn-warm" v-on:click="reset">重 置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/axios.min.js"></script>
<script src="/js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
        },
        methods: {
            reset: function () {
                var vm = this;
                vm.username = '';
                vm.password = '';
            },
            login: function () {
                console.info('login')
                var vm = this;
                axios({
                    url: '/user/login',
                    method:'POST',
                    headers: {'Content-Type':'application/json;charset=utf-8'},
                    data:{
                        'userName' : vm.username,
                        'password' : vm.password
                    }
                }).then(function (res) {
                    if (res.data.code == 200){
                        console.info('登录成功');
                        localStorage.setItem('woodToken', res.data.data.woodToken);
                        localStorage.setItem("userName",res.data.data.userName);
                        window.location.href = '/index'
                    }
                }).catch(function (reason) {
                    console.error(reason)
                })
            }
        },
        created: function () {
            console.info("vue created!")


        }
    })
</script>
</html>